<template lang="">
  <div>
    <el-dialog
      v-model="currShow"
      :title="teacherInfo ? '编辑教师' : '新增教师'"
      width="500px"
      :before-close="close"
      :close-on-click-modal="false"
      @open="open()"
    >
      <el-form
        :model="queryForm"
        v-loading="formLoading"
        :rules="rules"
        ref="queryRef"
        label-width="100px"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="23">
            <el-form-item label="名字" prop="name">
              <el-input
                v-model.trim="queryForm.name"
                maxlength="5"
                :disabled="teacherInfo ? true : false"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="年龄" prop="age">
              <el-input
                v-model.trim="queryForm.age"
                @input="queryForm.age = queryForm.age.replace(/[^0-9]/g, '')"
                maxlength="3"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="queryForm.gender" class="ml-4">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="电子邮件" prop="email">
              <el-input
                v-model.trim="queryForm.email"
                @input="queryForm.email = queryForm.email.replace(/[\u4e00-\u9fa5]/g, '')"
                maxlength="20"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="联系电话" prop="tel">
              <el-input
                v-model.trim="queryForm.tel"
                @input="queryForm.tel = queryForm.tel.replace(/[^0-9]/g, '')"
                maxlength="11"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="职位" prop="role">
              <el-select v-model="queryForm.role" class="m-2" placeholder="请选择" filterable clearable>
                <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close(false)">取消</el-button>
          <el-button type="primary" @click="submit(queryRef)" :loading="submitLoading">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { queryRoleList, addTeacher, editTeacher } from '@/api/organization/teachers'
import { nextTick } from 'vue'
import useCurrentInstance from '@/utils/useCurrentInstance'
import { defineComponent, reactive, ref, watch } from '@vue/runtime-core'
import { ElMessage } from 'element-plus'
export default defineComponent({
  props: {
    valueShow: {
      type: Boolean,
      default: false,
    },
    teacherInfo: {
      type: Object,
      default: () => { },
    },
  },
  setup(props, { emit }) {
    // 变量区域
    const { proxy } = useCurrentInstance()
    const currShow = ref(false)
    const formLoading = ref(false)
    const submitLoading = ref(false)
    const queryRef: any = ref(null)
    const roleList = ref([])
    const queryForm: any = ref({
      name: '',
      age: null,
      gender: null,
      email: null,
      role: null,
      tel: null,
      roleName: null
    })
    const rule = { required: true, message: '必填项', trigger: 'blur' }
    const rules = {
      name: [rule],
      age: [rule],
      gender: [rule],
      email: [rule],
      tel: [rule],
      role: [rule]
    }

    // 方法区域
    const open = () => {
      if (props.teacherInfo) {
        nextTick(() => {
          queryForm.value = { ...props.teacherInfo }
          delete queryForm.value.tea_name
          delete queryForm.value.password
          queryForm.value.name = props.teacherInfo.tea_name
        })
      }
    }

    const getRoleList = () => {
      queryRoleList().then((res: any) => {
        roleList.value = res.data
      })
    }

    const close = (val) => {
      emit('closeBox', val)
      nextTick(() => {
        queryRef.value.resetFields()
      })
    }

    const submit = (formRef) => {
      formRef.validate((valid) => {
        if (!valid) return
        const obj: any = roleList.value.find((item: any) => item.id === queryForm.value.role)
        queryForm.value.roleName = obj.roleName
        formLoading.value = true
        submitLoading.value = true
        const submitApi = props.teacherInfo ? editTeacher : addTeacher
        submitApi(queryForm.value)
          .then((res: any) => {
            ElMessage.success(res.message)
            close(true)
          })
          .finally(() => {
            formLoading.value = false
            submitLoading.value = false
          })
      })
    }

    const validateNumber = (obj, val) => {
      // 用正则表达式检查输入是否合法
      const regex = /^\d*\.?\d{0,2}$/
      // 如果输入不合法，移除最后一位字符
      !regex.test(obj[val]) && (obj[val] = obj[val].slice(0, -1))
    }

    // 钩子函数区域
    watch(
      () => props.valueShow,
      (newVal) => {
        currShow.value = newVal
      }
    )

    // 方法回调区域
    getRoleList()

    // return返回值
    return {
      currShow,
      formLoading,
      submitLoading,
      queryRef,
      queryForm,
      rules,
      roleList,
      open,
      close,
      submit,
      validateNumber,
    }
  },
})
</script>
